
//获取待读列表 ul 
const list = document.querySelector("#book-list ul");


// 创建书籍名称、删除按钮元素
const li = document.createElement("li");
const bookName = document.createElement("span");
const deleteBtn = document.createElement("span");


// 将书籍名称添加到 span 文字内容中
bookName.textContent = value;
// 修改按钮显示文字
deleteBtn.textContent = "删除";

//添加一些 class
bookName.classList.add("name");
deleteBtn.classList.add("delete");


// 将书籍名称和删除按钮加入到 li
li.appendChild(bookName);
li.appendChild(deleteBtn);
// 把 li 加入到 list
list.appendChild(li);


//提交表单
const addForm = document.querySelector("form#add-book");
//监听提交表单提交事件
addForm.addEventListener("submit", (event)=>{
	//拦截表单提交行为
    event.preventDefault();
    
    //获取输入框对象，在 addForm 对象中找 input
    const bookInputEle = addForm.querySelector("input[type='text']");
    	
	//获取输入框内容
    const bookName = bookInputEle.value
    console.log("输入的书名是：", bookName)
    
    // 创建书籍名称、删除按钮元素
    const liElement = document.createElement("li");
    const bookNameElement = document.createElement("span");
    const deleteBtnElement = document.createElement("span");

    // 将书籍名称添加到 span 文字内容中
    bookNameElement.textContent = bookName;
    // 修改按钮显示文字
    deleteBtnElement.textContent = "删除";

    //添加一些 class
    bookNameElement.classList.add("name");
    deleteBtnElement.classList.add("delete");

	// 将书籍名称和删除按钮加入到 li
    liElement.appendChild(bookNameElement);
    liElement.appendChild(deleteBtnElement);
    // 把 li 加入到 list
    list.appendChild(liElement);
})

const BookNameHTML = `<span class="name">${ bookName }</span>`;
const newBookItemHTML = `
<li>
    ${ BookNameHTML }
    <span class="delete">删除</span>
</li>
`;

list.insertAdjacentHTML('beforeend', newBookItemHTML);

//给 ul 绑定点击事件
list.addEventListener("click", (e) => {
    //判断点击的是删除按钮
    // e.target 是实际相应事件的元素，这里我们点击的是删除按钮
    if (e.target.className == "delete") {
        //获取点击按钮所在 li 
        const li = e.target.parentElement;
        //删除单个书籍
        li.remove()
    }
});


//隐藏书籍单选框对象
const hideBox = document.querySelector("#hide");

//捕捉 change 单选框状态改变事件
hideBox.addEventListener("change", ()=> {
    //获取单选框状态值
    console.log("勾选了隐藏所有书籍", hideBox.checked)    
    if (hideBox.checked) {
        list.style.display = "none";
    } else {
        list.style.display = "initial";
    }
}); 


// 搜索框输入事件
const searchBar = document.querySelector("#search-books input");
searchBar.addEventListener("keyup", (e) => {
	console.log("事件：", e)
	console.log("输入框内容：",e.target.value)

    //页面上的所有书籍 
    const books = document.querySelectorAll("#book-list ul li");

    //将books转为数组，使用 forEach 循环
    Array.from(books).forEach((book) => {
        //获取单本书结构中的书名
        const title = book.firstElementChild.textContent;

        //判断书名和输入框的内容时候有相同的内容
        if (title.toLowerCase().indexOf(e.target.value) != -1) {
            //有相同的关键字，显示为 flex布局
            book.style.display = "flex";
        } else {
            //没有找到相同的关键字，隐藏
            book.style.display = "none";
        }
    });
});

//在页面上找到 两个按钮（选项卡）
const tab_btn = document.querySelectorAll(".tab-buttons li");
//在页面上找到 tab
const tab_buttons = document.querySelector(".tab-buttons");
//在页面上找到 两个显示内容
const tab_contents = document.querySelectorAll(".tab-content");
// 给 tab添加点击事件监听，如果 tab的内容被点击了，会这个函数
tab_buttons.addEventListener("click", (event) => {
    //点击的元素是 li
    if (event.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_lis.forEach((i) => i.classList.toggle("active"));
    }
});

// tab被点击
tab_buttons.addEventListener("click", (e) => {
    //点击的元素是 li
    if (e.target.tagName == "LI") {
        // 切换tab 页面的 active 状态
        tab_btn.forEach((i) => i.classList.toggle("active"));
        //获取当前被点击的关联的是哪块内容
        const target_content = document.querySelector(e.target.dataset.target);
        //循环所有展示容器
        Array.from(tab_contents).forEach((content) => {
            //展示容器和点击查询出来的容器相符，添加 active 状态
            //不是则移除 active 状态
            if (content == target_content) {
                content.classList.add("active");
            } else {
                content.classList.remove("active");
            }
        });
    }
});